<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1"></table>
  <button onclick="getData(1)">1</button>
  <button onclick="getData(2)">2</button>


  <p>&lt;p&gt;是一个段落文本标签</p>
  
  <script>
    /*
      特点	      GET请求	                          POST请求
      参数位置	   URL中	                            请求体中
      安全性	   较低，参数暴露在URL中	          较高，参数隐藏在请求体中
      缓存	      浏览器通常会缓存	             浏览器一般不会缓存
      幂等性	   幂等，多次请求相同	            非幂等，多次请求可能产生不同结果
      浏览器历史	参数会完整保留	                   参数不会被保留
      书签	      可以被Bookmark	                  不能被Bookmark
      大小         4kb                               不限
    
    */ 

    const getData = (num) => {
      // 需要向后端传递参数，告诉后端一些信息
      fetch(`http://127.0.0.1:3000/users/list?page=${num}&count=5`)
        .then(response => response.json())
        .then(res => {
          let str = `
            <thead>
              <td>学号</td>
              <td>姓名</td>
              <td>操作</td>
            </thead>
          `
          if (res.success) {
            res.data.forEach(item => {
              str += `
                <tr>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td><button onclick="remove(${item.id})">删除</button></td>
                </tr>
              `
            })
            document.querySelector("table").innerHTML = str;
          }
        })
    }

    getData(1);

    const remove = (id) => {
      // 后端如果用了post的请求，那么前端也要换成对应的post的请求
      // post的请求的参数不能拼接在url上面了
      // 需要加第二个参数，一个对象
      fetch(`http://127.0.0.1:3000/users/del`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({id : id})
      })
        .then(response => response.json())
        .then(res => {
          if (res.success) {
            getData(1);
          }
          
        })
    }


  </script>
</body>
</html>